<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>桥梁构件缺陷信息面板</title>
    <style>
      .panel {
        border: 1px solid #ddd;
        padding: 20px;
        background-color: #f8f9fa;
        position: absolute;
        cursor: default;
        width: 400px;
        height: 300px;
      }

      .panel-heading {
        background-color: #007bff;
        color: #fff;
        padding: 10px 15px;
        cursor: move;
      }

      .panel-body {
        padding: 15px;
      }

      .toggle-btn {
        cursor: pointer;
      }

      .resize-handle {
        width: 10px;
        height: 10px;
        background-color: #ccc;
        position: absolute;
        bottom: 0;
        right: 0;
        cursor: se-resize;
      }
    </style>
  </head>

  <body>
    <div class="panel" id="panel">
      <div class="panel-heading">
        桥梁构件缺陷信息
        <span class="toggle-btn" onclick="toggleDetails()">详情</span>
      </div>
      <div class="panel-body" id="details"></div>
      <div class="resize-handle"></div>
    </div>

    <script>
      var data = {
        id: 24572,
        detectDate: "2024/06/24 14:36:08",
        bridgeId: "61d3e205c1e6095a51a30213",
        task: 808,
        part: "上部结构",
        component: "上部承重构件",
        subcomponent: "小箱梁",
        componentNo: "上部结构,上部承重构件,小箱梁$L,2-4",
        defectTableNo: "5.1.1-11",
        defectType: "简支梁（板）桥、刚架桥裂缝",
        defectGrade: 2,
        gradeVerified: false,
        scoreComponentNo: "L,2-4",
        pictures: ["61d3e205c1e6095a51a30213/defect//上云特大桥00052.jpg"],
        defectDescription:
          "左幅第2跨第4片小箱梁距左侧:0.94距小桩号侧:7.91米,距底板:0.83米, 存在1条简支梁（板）桥、刚架桥裂缝：裂缝宽度0.1mm,长度117.1cm",
        labels: ["环向"],
        length: 1170.8015,
        width: 0,
        depth: 0,
        otherNorms: "数量(条):1.0$裂缝宽度(mm):0.1$",
      };

      var mappings = {
        id: "编号",
        detectDate: "检测日期",
        bridgeId: "桥梁编号",
        task: "任务编号",
        part: "部位",
        component: "组件",
        subcomponent: "子组件",
        componentNo: "组件编号",
        defectTableNo: "缺陷表编号",
        defectType: "缺陷类型",
        defectGrade: "缺陷等级",
        gradeVerified: "等级验证",
        scoreComponentNo: "得分组件编号",
        pictures: "图片",
        defectDescription: "缺陷描述",
        labels: "标签",
        length: "长度",
        width: "宽度",
        depth: "深度",
        otherNorms: "其他规范",
      };

      var isDragging = false;
      var offsetX, offsetY;

      document
        .getElementById("panel")
        .addEventListener("mousedown", function (e) {
          if (e.target.classList.contains("panel-heading")) {
            isDragging = true;
            offsetX = e.clientX - this.offsetLeft;
            offsetY = e.clientY - this.offsetTop;
          }
        });

      document.addEventListener("mousemove", function (e) {
        if (isDragging) {
          var x = e.clientX - offsetX;
          var y = e.clientY - offsetY;
          document.getElementById("panel").style.left = x + "px";
          document.getElementById("panel").style.top = y + "px";
        }
      });

      document.addEventListener("mouseup", function () {
        isDragging = false;
      });

      var isResizing = false;
      var startWidth, startHeight, startX, startY;

      var resizeHandle = document.querySelector(".resize-handle");
      resizeHandle.addEventListener("mousedown", function (e) {
        isResizing = true;
        startWidth =
          document.getElementById("panel").offsetWidth -
          parseInt(
            getComputedStyle(document.getElementById("panel")).paddingLeft
          ) -
          parseInt(
            getComputedStyle(document.getElementById("panel")).paddingRight
          );
        startHeight =
          document.getElementById("panel").offsetHeight -
          parseInt(
            getComputedStyle(document.getElementById("panel")).paddingTop
          ) -
          parseInt(
            getComputedStyle(document.getElementById("panel")).paddingBottom
          );
        startX = e.clientX;
        startY = e.clientY;
      });

      document.addEventListener("mousemove", function (e) {
        if (isResizing) {
          var width = startWidth + (e.clientX - startX);
          var height = startHeight + (e.clientY - startY);
          document.getElementById("panel").style.width = width + "px";
          document.getElementById("panel").style.height = height + "px";
        }
      });

      document.addEventListener("mouseup", function () {
        isResizing = false;
      });

      function generateDetails() {
        var detailsDiv = document.getElementById("details");
        detailsDiv.innerHTML = "";

        for (var key in data) {
          var value = data[key];
          var displayKey = mappings[key] || key;
          detailsDiv.innerHTML += `<p><strong>${displayKey}:</strong> ${value}</p>`;
        }
      }

      generateDetails();

      function toggleDetails() {
        var details = document.getElementById("details");
        if (details.style.display === "none") {
          details.style.display = "block";
        } else {
          details.style.display = "none";
        }
      }

      // 处理窗口大小改变时的位置和尺寸调整
      window.addEventListener("resize", function () {
        var panel = document.getElementById("panel");
        var left = parseInt(panel.style.left);
        var top = parseInt(panel.style.top);
        var width = parseInt(panel.style.width);
        var height = parseInt(panel.style.height);

        // 根据窗口大小重新计算位置和尺寸
        panel.style.left = Math.max(0, left);
        panel.style.top = Math.max(0, top);
        panel.style.width = Math.min(window.innerWidth - left, width);
        panel.style.height = Math.min(window.innerHeight - top, height);
      });
    </script>
  </body>
</html>
